<template>
	<view class="order pages">
		<!-- 顶部空余 -->
		<view style="width: 100%;height: var(--status-bar-height)"></view>
		<view class="search">
			<view class="back" @click="back">
				<uni-icons type="back" color="#000000" size="24"></uni-icons>
			</view>
			<view class="search_input">
				<uni-search-bar :placeholder="$t('order.orderList.Name')" :cancel-text="$t('order.orderList.Server')"
					@cancel="input" @confirm="input"></uni-search-bar>
			</view>
		</view>
		<view class="container unset">
			<!-- 导航 -->
			<view class="order_tab">
				<u-tabs :list="list" :scrollable="false" @click="changeTab" lineWidth="40" lineColor="#000"
					:duration="400" :current="isActive" activeStyle="color:#000;font-size:28rpx;font-weight:600"
					inactiveStyle="font-size:28rpx;font-weight:500;color:#a5a5a5"></u-tabs>
			</view>
			<view class="content">
				<view class="list">
					<view class="order_item" v-for="item in orderList" :key="item.id">
						<view class="order_header">
							{{item.status_str}}
						</view>
						<view class="order_detail" v-for="product in item.product" :key="product.id">
							<view class="order_img">
								<image :src="product.good_mainimg" style="width: 100%;height: 100%;"></image>
							</view>
							<view class="order_content" @tap="openDetail(item.order_id)">
								<view class="order_txt">
									{{product.good_name}}
								</view>
								<view class="size">
									{{product.sku_name}}
									<!-- 数量X{{item.num}} -->
								</view>
							</view>
						</view>
						<view class="order_money" style="text-align: right;">
							<text>{{$t('order.orderList.All')}}{{item.nums}}{{$t('order.orderList.Jian')}}</text>
							<text style="margin-left: 20rpx;">{{$t('order.orderList.Pay')}}￥{{item.realmoney}}</text>
						</view>
						<view class="order_btns">
							<view class="order_btn" v-if="item.pay_btn==1" @click="orderPayinfo(item.order_id,true)">
								{{$t('order.orderList.mPay')}}
							</view>
							<view class="order_btn" v-if="item.shouhuo_btn==1" @click="confirm(item.order_id,false)">
								{{$t('order.orderList.Sure')}}
							</view>
							<view class="order_btn" v-if="item.wuliu_btn==1" @click="openStep(item.order_id)">
								{{$t('order.orderList.See')}}
							</view>
							<view class="order_btn" v-if="item.cancel_btn==1" @click="orderCancel(item.order_id)">
								{{$t('order.orderList.Cancel')}}
							</view>
							<view class="order_btn" v-if="item.delete_btn==1" @click="orderDelete(item.order_id)">
								{{$t('order.orderList.Del')}}
							</view>
						</view>
					</view>
				</view>
				<view class="no_list" v-if="orderList.length==0">
					<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/car.png"
						:text="$t('general.Indent')">
					</u-empty>
				</view>
			</view>
		</view>
		<uni-transition mode-class="fade" :show="payinfoShow" class="mask" :duration="200">
			<view class="mask_container">
				<view class="mask_title">
					{{$t('order.orderList.dPay')}}
				</view>
				<input type="password" :placeholder="$t('order.orderList.pPass')" v-model="payinfo.payPassword">
				<view class="mask_btn">
					<view class="cancel" @tap="payinfoShow=false">
						{{$t('order.orderList.Cancels')}}
					</view>
					<view class="confirm" @tap="payOrder" v-if="payOrderShow">
						{{$t('order.orderList.Pays')}}￥{{payinfo.money}}
					</view>
					<view class="confirm" @tap="orderConfirm" v-else>
						{{$t('order.orderList.Sure')}}
					</view>
				</view>
			</view>
		</uni-transition>
		<uni-popup ref="order" type="bottom">
			<view class="order_wai">
				<view class="flex_be popup-title">
					<uni-icons type="closeempty" color="grey" @click="closeOrder"></uni-icons>
					<view class="flex">
						<view style="margin-left: 10rpx;">{{$t('order.orderList.Need')}}</view>
					</view>
					<view></view>
				</view>
				<view style="height: 700rpx;overflow: auto;">
					<view class="orders" v-for="item in qOrderlist" :key="item.first_id">
						<view class="flex_be">
							<view style="font-weight: bold;">
								<uni-icons type="person-filled" size="20" color="#00CACC"></uni-icons>
								<text style="margin: 0 10rpx;">{{$t('order.orderList.Title')}}</text>
								<uni-icons type="right" color="grey"></uni-icons>
							</view>
						</view>
						<view class="flex order-good">
							<view class="flex_ce og-image">
								<image :src="item.good_mainimg" style="width: 100%;height: 100%;"></image>
							</view>
							<view class="flex_co og-info" style="padding: 5rpx 0;">
								<view>
									<view class="og_info_title">{{item.good_name}}</view>
									<view class="flex_be" style="color: gray;margin-top: 5rpx;">
										<view>{{$t('order.orderList.Num')}}{{item.nums}}</view>
									</view>
								</view>
								<view style="font-weight: bold;">￥{{item.good_money}}</view>
							</view>
						</view>
						<view class="flex_be" style="margin-top: 10rpx;">
							<view>{{$t(order.orderList.Yun)}}</view>
							<view style="color: grey;margin-right: 20rpx;">￥{{item.expmoney}}</view>
						</view>
						<view class="flex_be" style="margin-top: 10rpx;">
							<view>{{$t('order.orderList.Quan')}}</view>
							<view style="color: grey;">
								<text style="color: red;margin-right: 20rpx;">-￥{{item.yh_money}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="pay">
					<view class="pay-text">
						<view>{{$t('order.orderList.Gong')}}{{qOrderlist.length}}{{$t('order.orderList.Piece')}} |
							{{$t('order.orderList.Amounts')}}<text>￥{{allrealmoney.toFixed(2)}}</text>
						</view>
						<view class="flex">
							<view>{{$t('order.orderList.You')}}￥{{totalOffer.toFixed(2)}}</view>
							<view style="margin-left: 30rpx;">{{$t('order.orderList.yunFee')}}￥{{totalCosts.toFixed(2)}}
							</view>
						</view>
					</view>
					<view class="flex_be">
						<view class="pay-xiang" style="width: 35%;" @click="closeOrder">{{$t('order.orderList.Think')}}
						</view>
						<view class="pay-btn" @click="orderClick" style="width: 60%;text-align: center;">
							{{$t('order.orderList.goOn')}}
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<u-popup :show="stepShow" round="10" @close="closeStep">
			<view class="step_content">
				<view class="step_title">
					{{$t('order.orderList.Speed')}}
				</view>
				<view class="step_item" v-for="(item,index) in timeinfo" :key="index">
					<view class="left">
						<view class="status">
							<view class="status_inner"></view>
						</view>
					</view>
					<view class="step_item_content">
						<view class="step_content_header">
							<view>{{item.status_str}}</view>
							<view>{{item.time_str}}</view>
						</view>
						<view class="step_content_content">{{item.content}}</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		orderLists,
		orderPayinfo,
		orderPay,
		orderCancel,
		orderDelete,
		orderConfirm,
		orderExpinfo
	} from '@/api/api.js'
	export default {
		data() {
			return {
				isActive: 0,
				keywords: '',
				list: [{
					name: this.$t('order.orderList.Allin'),
				}, {
					name: this.$t('order.orderList.nPay'),
				}, {
					name: this.$t('order.orderList.noSend')
				}, {
					name: this.$t('order.orderList.noServe')
				}, {
					name: this.$t('order.orderList.had')
				}],
				orderList: [],
				payinfoShow: false,
				payinfo: {},
				payOrderShow: true,
				qOrderlist: [],
				allrealmoney: 0,
				totalOffer: 0,
				totalCosts: 0,
				stepShow: false,
				timeinfo: []
			}
		},
		onReachBottom() {
			this.page++
			this.orderLists()
		},
		onLoad(opt) {
			this.isActive = Number(opt.key)
			this.page = 1
			this.orderList = []
			this.orderLists()
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			openStep(id) {
				this.stepShow = true
				orderExpinfo({
					token: uni.getStorageSync('token'),
					ordid: id
				}).then(res => {
					this.timeinfo = res.data.data
				})
			},
			closeStep() {
				this.stepShow = false
			},
			openDetail(order_id) {
				uni.navigateTo({
					url: "/pages/shop/order/order?id=" + order_id
				})
			},
			openOrder() {
				this.$refs.order.open()
			},
			closeOrder() {
				this.$refs.order.close()
			},
			changeTab(e) {
				this.isActive = e.index
				this.page = 1
				this.orderList = []
				this.orderLists()
			},
			orderLists() {
				orderLists({
					token: uni.getStorageSync('token'),
					page: this.page,
					status: this.isActive,
					keywords: this.keywords
				}).then(res => {
					if (res.data.data.data.length > 0) {
						this.orderList = [...this.orderList, ...res.data.data.data]
						this.$forceUpdate() // 页面强制刷新
					} else {
						this.page--;
						uni.showToast({
							title: this.$t('order.orderList.moreNum'),
							icon: "none"
						})
					}
				})
			},
			// 支付
			orderPayinfo(order_id, blo) {
				this.payOrderShow = blo
				orderPayinfo({
					token: uni.getStorageSync('token'),
					ordid: order_id
				}).then(res => {
					this.payinfo = res.data.data
					if (!!res.data.data.orderlist) {
						this.qOrderlist = res.data.data.orderlist
						this.qOrderlist.forEach(item => {
							this.allrealmoney = this.allrealmoney + (item.realmoney * 1)
							this.totalOffer = this.totalOffer + (item.yh_money * 1)
							this.totalCosts = this.totalCosts + (item.expmoney * 1)
						})
						this.openOrder()
					} else {
						this.payinfoShow = true
					}

				})
			},
			orderClick() {
				this.closeOrder()
				this.payinfoShow = true
			},
			payOrder() {
				orderPay({
					token: uni.getStorageSync('token'),
					ordid: this.payinfo.ordid,
					security_password: this.payinfo.payPassword
				}).then(res => {
					this.payinfoShow = false
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						uni.redirectTo({
							url: "/pages/shop/order/orderList?key=2"
						})
					}, 600)
				})
			},
			// 取消订单
			orderCancel(order_id) {
				orderCancel({
					token: uni.getStorageSync('token'),
					ordid: order_id
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						uni.redirectTo({
							url: "/pages/shop/order/orderList?key=0"
						})
					}, 600)
				})
			},
			// 删除订单
			orderDelete(order_id) {
				orderDelete({
					token: uni.getStorageSync('token'),
					ordid: order_id
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						uni.redirectTo({
							url: "/pages/shop/order/orderList?key=0"
						})
					}, 600)
				})
			},
			// 确认收货
			confirm(order_id, blo) {
				this.payinfoShow = true
				this.payOrderShow = blo
				this.payinfo.ordid = order_id
			},
			orderConfirm() {
				orderConfirm({
					token: uni.getStorageSync('token'),
					ordid: this.payinfo.ordid,
					security_password: this.payinfo.payPassword
				}).then(res => {
					this.payinfoShow = false
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						uni.redirectTo({
							url: "/pages/shop/order/orderList?key=0"
						})
					}, 600)
				})
			},
			input(e) {
				this.keywords = e.value
				this.page = 1
				this.orderList = []
				this.orderLists()
				this.orderLists()
			},

		}
	}
</script>

<style lang="scss" scoped>
	.order {
		width: 100%;
		// height: 100vh;

		.search {
			padding: 30rpx 40rpx 0;
			display: flex;
			align-items: center;

			.back {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.search_input {
				flex: 1;
				height: 80rpx;
				margin-left: 40rpx;
			}
		}

		.container.unset {
			position: inherit !important;
			width: unset !important;
			min-height: unset !important;
			background: unset !important;

			.content {
				.list {
					.order_item {
						padding: 40rpx 30rpx 30rpx 40rpx;
						border-bottom: 16rpx solid #f5f5f9;

						.order_header {
							font-size: 28rpx;
							color: rgba(0, 0, 0, 0.8);
							font-weight: 600;
							padding-bottom: 30rpx;
							border-bottom: 2rpx solid #f5f5f8;
						}

						.order_detail {
							display: flex;
							padding: 30rpx;

							.order_img {
								width: 180rpx;
								height: 180rpx;
								border: 2rpx solid #f5f5f8;
								display: flex;
								justify-content: center;
								align-items: center;

								uni-image {
									width: 100%;
									height: 100%;
								}
							}

							.order_content {
								flex: 1;
								margin-left: 30rpx;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								justify-content: space-between;

								.order_txt {
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
									font-size: 28rpx;
									font-weight: 600;
								}

								.size {
									font-size: 24rpx;
									color: #9e9ea9;
									margin-top: 0;
									margin-bottom: auto;
								}

								.order_money {
									font-size: 28rpx;
									color: #000;
									font-weight: 600;

									.money_txt {
										font-size: 24rpx;
										color: rgba(0, 0, 0, 0.8);

									}
								}
							}
						}

						.order_btns {
							display: flex;
							flex-direction: row-reverse;

							.order_btn {
								padding: 10rpx 20rpx;
								font-size: 24rpx;
								font-weight: 500;
								background: #00cbcc;
								color: #fff;
								border-radius: 6rpx;
								margin: 10rpx 5rpx 0;
							}
						}
					}
				}
			}
		}
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.flex_ce {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flex_be {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex_co {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	/deep/.uni-searchbar {
		padding: 0;
	}

	/deep/.uni-searchbar__box {
		padding: 0;
	}

	/deep/.u-tabs__wrapper__nav {
		width: 100%;
	}

	.mask {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 999;

		.mask_container {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 640rpx;
			height: 240rpx;
			background: #fff;
			border-radius: 12rpx;
			box-shadow: 10rpx 10rpx 20rpx 0 rgba(0, 0, 0, 0.5);
			padding: 20rpx 70rpx 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.mask_title {
				font-size: 32rpx;
				color: #666;
				text-align: center;
			}

			input {
				border-bottom: #666 1px solid;
				padding: 5rpx 10rpx;
				font-size: 34rpx;
				letter-spacing: 3px;
			}

			.mask_btn {
				display: flex;
				justify-content: space-between;
				color: #01c2c3;
				font-size: 30rpx;
				line-height: 32rpx;
			}
		}
	}

	.order_wai {
		background-color: #fff;
		padding: 20rpx 0 200rpx;

		.popup-title {
			height: 100rpx;
			border-bottom: #F4F3F8 1px solid;
			padding: 0 20rpx;
		}

		.pay-xiang {
			border: #000 1rpx solid;
			padding: 15rpx 40rpx;
			border-radius: 10rpx;
			text-align: center;
		}

		.orders {
			margin: 20rpx;
			background-color: #fff;
			padding: 20rpx;
			border-radius: 5rpx;

			.order-jia {
				font-size: 26rpx;
				background-color: #F4F3F8;
				padding: 0 10rpx;
				border-radius: 30rpx;
			}

			.order-good {
				margin: 20rpx 0;

				.og-image {
					width: 240rpx;
					height: 240rpx;
					border: #F4F3F8 1px solid;
					border-radius: 5rpx;
					margin-right: 20rpx;
					flex-shrink: 0;
				}

				.og-info {
					height: 240rpx;
					flex-grow: 1;

					.og_info_title {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}

				.og-type {
					&>view {
						color: crimson;
						border: 1px crimson solid;
						font-size: 24rpx;
						padding: 0 10rpx;
						margin: 0 10rpx 10rpx 0;
					}
				}
			}

			.order-price {
				text-align: right;
				margin: 40rpx 0 20rpx 0;

				&>text {
					font-weight: bold;
				}
			}
		}

		.pay {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #fff;
			padding: 20rpx;
			border-top: #F4F3F8 1px solid;

			.pay-text {
				font-size: 28rpx;

				text {
					font-size: 40rpx;
					font-weight: bold;
					color: crimson;
				}
			}

			.pay-btn {
				background-color: #00CACC;
				color: #fff;
				padding: 15rpx 40rpx;
				border-radius: 10rpx;
			}
		}
	}

	.step_content {
		width: 100%;
		padding: 120rpx 40rpx;

		.step_title {
			font-size: 32rpx;
			font-weight: 600;
			padding-bottom: 60rpx;
		}

		.step_item {
			display: flex;
			justify-content: center;
			// align-items: center;
			width: 100%;
			padding-bottom: 40rpx;

			.left {
				height: 100%;
				padding: 4rpx 0 0;

				.status {
					width: 20rpx;
					height: 20rpx;
					background-color: transparent;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;

					.status_inner {
						width: 12rpx;
						height: 12rpx;
						background: #aba9b6;
						border-radius: 50%;
					}
				}
			}

			.step_item_content {
				flex: 1;
				margin-left: 20rpx;

				.step_content_header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					line-height: 28rpx;
					color: #aba9b6;

					uni-view:nth-child(2) {
						font-size: 24rpx;
						color: #aba9b6;
					}
				}

				.step_content_content {
					font-size: 24rpx;
					line-height: 24rpx;
					margin-top: 10rpx;
					color: #aba9b6;
				}
			}
		}

		.step_item:last-child {
			.left {
				.status {
					width: 20rpx;
					height: 20rpx;
					background-color: #56a5ac;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;

					.status_inner {
						width: 12rpx;
						height: 12rpx;
						background: #fff;
						border-radius: 50%;
					}
				}
			}

			.step_item_content {

				.step_content_header {
					color: #333333;

					uni-view:nth-child(2) {
						color: #333333;
					}
				}

				.step_content_content {
					color: #777777;
				}
			}
		}
	}
</style>